<template>
  <div>
    <div class="crumbs">
      <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="广告分类">
          <el-cascader clearable v-model="formInline.cateIds" :options="tree" :props="defaultProps" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch('form')">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="名称" width="350"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="200" :formatter="minuteFormat"></el-table-column>
      <el-table-column prop="status" label="状态" width="120" :formatter="statusFormat"></el-table-column>
      <el-table-column prop="audit_status" label="审核状态" width="150" :formatter="auditFormat"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="edit(scope.$index, scope.row)">查看/编辑</el-button>
          <el-button v-if="scope.row.status === 0" size="small" @click="start(scope.$index, scope.row)">启用</el-button>
          <el-button v-if="scope.row.status === 1" size="small" @click="stop(scope.$index, scope.row)">禁用</el-button>
          <el-button v-if="scope.row.audit_status === 0" size="small" @click="pass(scope.$index, scope.row)">
            审核通过
          </el-button>
          <el-button v-if="scope.row.audit_status === 0" size="small" @click="failed(scope.$index, scope.row)">
            审核失败
          </el-button>
          <el-button size="small" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        defaultProps: {
          value: 'id',
          label: 'name',
          children: '_child'
        },
        formInline: {
          cateIds: []
        },
        cateId: 0
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.advert.advertList,
        pageData: state => state.advert.pageData,
        tree: state => state.advert.classTree
      })
    },
    async created () {
      await this.advertList()
      await this.classTree()
    },
    methods: {
      // 获取广告分类树
      async classTree () {
        await this.$store.dispatch('advert/classTree')
      },
      // 获取广告列表
      async advertList () {
        let payload = {
          page: this.pageData.current_page,
          listRows: this.pageData.per_page,
          c_id: this.$route.query.cateId
        }
        await this.$store.dispatch('advert/advertList', payload)
      },
      onSearch (formName) {
        const self = this
        self.$refs[formName].validate((valid) => {
          if (valid) {
            if (Number(self.formInline.cateIds.length) > 0) {
              self.cateId = self.formInline.cateIds[Number(self.formInline.cateIds.length) - 1]
            } else {
              self.cateId = 0
            }
            self.$router.push({path: '/advert/advertlist', query: {cateId: self.cateId}})
            self.advertList()
          }
        })
      },
      // 点击翻页时操作
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.advertList()
      },
      edit (index, row) {
        this.$router.push({name: 'AdvertEdit', params: {id: row.id}})
      },
      // 启用广告
      start (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('advert/advertStart', payload).then(res => {
          this.advertList()
          notify.success(res.msg)
        })
      },
      // 禁用广告
      stop (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('advert/advertStop', payload).then(res => {
          this.advertList()
          notify.success(res.msg)
        })
      },
      // 广告审核通过
      pass (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('advert/advertPass', payload).then(res => {
          this.advertList()
          notify.success(res.msg)
        })
      },
      // 广告审核失败
      failed (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('advert/advertFailed', payload).then(res => {
          this.advertList()
          notify.success(res.msg)
        })
      },
      // 广告删除
      del (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('advert/advertDel', payload).then(res => {
          this.advertList()
          notify.success(res.msg)
        })
      },
      // 时间戳转换
      minuteFormat (row, column) {
        let mydate = new Date()
        mydate.setTime(row[column.property] * 1000)
        let result = mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate() + ' ' + mydate.getHours() + ':' + mydate.getMinutes() + ':' + mydate.getSeconds()
        return result
      },
      statusFormat (row, column) {
        if (row[column.property] === 1) {
          return '正常'
        }
        return '废弃'
      },
      auditFormat (row, column) {
        if (row[column.property] === 1) {
          return '审核通过'
        } else if (row[column.property] === 0) {
          return '未审核'
        }
        return '未通过'
      }
    }
  }
</script>
